<!--
 * @Description: 登录主页面
 * @Autor: 田力源
 * @Date: 2023-02-17 15:56:09
 * @LastEditors: 田力源
 * @LastEditTime: 2023-02-17 15:56:26
-->
<template>
    <div class="sign">
        <div class="sign-box">
            <h2>注册</h2>
            <div class="nickname">
                <span class="text">昵称</span>
                <div class="input">
                    <i class="iconfont icon-yonghu"></i>
                    <input type="text" class="seach-content" v-model="userinfo.nickname" @blur="check('nickname')">
                </div>
            </div>
            <div class="username">
                <span class="text">用户名</span>
                <div class="input">
                    <i class="iconfont icon-yonghu"></i>
                    <input type="text" class="seach-content" v-model="userinfo.username" @blur="check('username')">
                </div>
            </div>
            <div class="password">
                <span class="text">密码</span>
                <div class="input">
                    <i class="iconfont icon-mima"></i>
                    <input :type="showPassword ? 'text' : 'password'" class="seach-content" v-model="userinfo.password"
                        @blur="check('password')">
                    <i class="iconfont" :class="showPassword ? 'icon-icon-test' : 'icon-icon-test1'"
                        @click="showPassword = !showPassword"></i>
                </div>
            </div>
            <div class="re-password">
                <span class="text">确认密码</span>
                <div class="input">
                    <i class="iconfont icon-mima"></i>
                    <input :type="showRePassword ? 'text' : 'password'" class="seach-content" v-model="userinfo.rePassword"
                        @blur="check('re-password')">
                    <i class="iconfont" :class="showRePassword ? 'icon-icon-test' : 'icon-icon-test1'"
                        @click="showRePassword = !showRePassword"></i>
                </div>
            </div>
            <div class="submit" @click="signSubmit">注册</div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { sign } from '@/api/user'
import { ElMessage } from 'element-plus'
import router from '@/router';
import { useUserStore } from '@/store/index';
// 密码显隐
const showPassword = ref(false)
const showRePassword = ref(false)
const userinfo = reactive({
    nickname: '',
    username: '',
    password: '',
    rePassword: '',
})
const user = useUserStore();
const checkArr = ['username','password','re-password','nickname'];
const check = (str: string) => {
    const dom = document.querySelector(`.${str} .seach-content`) as any;
    if (str === 're-password') {
        userinfo.rePassword !== userinfo.password ? dom.classList.add('error') : dom.classList.remove('error')
        return userinfo.rePassword === userinfo.password
    } else {
        userinfo[str].length === 0 ? dom.classList.add('error') : dom.classList.remove('error')
        if (str === 'password') {
            const redom = document.querySelector('.re-password .seach-content') as any;
            userinfo.rePassword !== userinfo.password ? redom.classList.add('error') : redom.classList.remove('error')
            return userinfo.rePassword === userinfo.password
        }
        return userinfo[str].length !== 0
    }
}
const signSubmit = () => {
    // 先检查是否全部合规了
    let flag = true;
    checkArr.forEach(item=>{
        if(!flag) return check(item);
        flag = check(item)
    })
    if(!flag) return ElMessage.error('请检查表单格式')
    const param = {
        nickname:userinfo.nickname,
        username:userinfo.username,
        password:userinfo.password,
    }
    sign(param).then((res: any) => {
        console.log(res)
        if(res.code !== 200) return  ElMessage.error(res.msg || '注册失败')
        ElMessage({
            message: '注册成功',
            type: 'success',
        })
        router.push(`/login`)
    })
}
</script>

<style scoped lang="scss">
.sign-box {
    margin: 100px auto;
    width: 900px;
    height: 700px;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    color: #333;

    h2 {
        padding-top: 60px;
        font-size: 36px;
        text-align: center;
        letter-spacing: 10px;
    }

    .username,
    .nickname,
    .re-password,
    .password {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 60px;

        .text {
            font-weight: bold;
            font-size: 20px;
            margin-right: 50px;
        }
    }

    .password .text,
    .nickname .text {
        letter-spacing: 40px;
        margin-right: 10px;
    }

    .username .text {
        letter-spacing: 10px;
        margin-right: 40px;
    }

    .input {
        input::-ms-clear {
            display: none;
        }

        input::-ms-reveal {
            display: none;
        }

        position: relative;
        width: 550px;

        .icon-yonghu,
        .icon-mima {
            color: #ccc;
            font-size: 25px;
            position: absolute;
            left: 15px;
            top: 10px;
        }

        .icon-icon-test,
        .icon-icon-test1 {
            color: #ccc;
            font-size: 25px;
            position: absolute;
            right: 15px;
            top: 10px;
            cursor: pointer;

            &:hover {
                color: #333;
            }
        }

        .seach-content {
            width: 450px;
            height: 40px;
            border-radius: 20px;
            border: none;
            box-shadow: 0 0 3px rgb(0, 0, 0, 0.3);
            padding-left: 50px;
            padding-right: 50px;
            font-size: 20px;
            color: #333;
            outline: none;
            transition: box-shadow .3s;

            &.error {
                border: none;
                box-shadow: 0 0 3px rgba(222, 26, 26, 0.7);
            }

            &:focus {
                border: none;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
            }
        }

    }

    .submit {
        width: 140px;
        height: 50px;
        margin: 80px auto 0;
        cursor: pointer;
        background-color: rgb(255, 204, 0);
        color: #fff;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        line-height: 50px;
        border-radius: 6px;
    }
}</style>